<template>
	<view class="container pad-t-10 pad-b-10  page" v-if="info">
		<!-- <view class="section">
			<view class="font-size-18 font-fa-me font-bold">
				<text class="font-color-price">*</text>
				<text>咨询人</text>
			</view>
			<view class="consult-user mar-t-13">
				<input type="text" placeholder="咨询人名称" v-model="linkman" />
			</view>
		</view>
		<view class="section mar-t-20">
			<view class="font-size-18 font-fa-me font-bold">
				<text class="font-color-price">*</text>
				<text>联系方式</text>
			</view>
			<view class="consult-user mar-t-13">
				<input type="text" placeholder="联系方式" v-model="mobile" />
			</view>
		</view> -->
		<view class="section mar-t-35 flex">
			<view class="font-size-18 font-fa-me font-bold flex-1">
				<text class="font-color-price">*</text>
				<text>咨询师</text>
			</view>
			<view class="consultor-name">
				<text class="font-size-18">{{info.user.nickname||''}}</text>
			</view>
		</view>
		<view class="section mar-t-35">
			<view class="font-size-18 font-fa-me font-bold">
				<text class="font-color-price">*</text>
				<text>咨询方式</text>
			</view>
			<view class="mar-t-20 do-consult">
				<text
					class="mar-r-15"
					v-for="(way,i) in info.way"
					:key="i"
					:class="{active:i==way_index}"
					@click="changeWayIndex(i)"
				>{{way =='10'?'线上咨询':'线下咨询'}}</text>
			</view>
		</view>

		
		<view class="section mar-t-40">
			<view class="font-size-18 font-fa-me font-bold">
				<text class="font-color-price">*</text>
				<text>咨询类型</text>
			</view>
			<view class="consult-type mar-t-10">
				<block v-if="info.tag_text">
					<text
						class="font-color-999 mar-t-10"
						v-for="(tag,i) in info.tag_text"
						:key="i"
						:class="{'active':tag_index == i}"
						@click="changeTag(i)"
					>{{tag}}</text>
				</block>
			</view>
		</view>
		<view class="section mar-t-40">
			<view class="font-size-18 font-fa-me font-bold">
				<text class="font-color-price">*</text>
				<text>可约时间</text>
			</view>
			<block v-if="work_list">
				
				
				<scroll-view 
					class="choose-consult-date"
					:scroll="false"
					:scroll-x="true"
					:show-scrollbar="false"
					:scroll-into-view="'tab'+current_day_index"
				>	
						<view class="flex-column align-end">
							<view class="flex-row pad-10">
								<view
									class="uni-tab-item"
									v-for="(item,index) in work_list"
									:key="index"
									:class="{'active':index == current_day_index}"
									:id="'tab'+index"
									@click="changeDay(index)"
								>
									<view class="uni-tab-item-title" v-if="work_list[index].list.work_hours_arr">
										<view class="week-name ">
											<text class=" font-size-13" >{{item.week}}</text><text class="font-size-12">（{{item.month}}/{{item.day}}）</text>
										</view>
									</view>
								</view>
							</view>
						</view>
				</scroll-view>

				<view class="choose-consult-time mar-t-20 pos-rel" v-if="work_list[current_day_index]">
					<block v-if="work_list[current_day_index].list.work_hours_arr">
						<view
							class="item-time"
							v-for="(hours,i) in work_list[current_day_index].list.work_hours_arr"
							:key="i"
							:class="{'acitve':time_index==i}"
							@click="changeTime(i)"
						>
							<text>{{hours}}</text>
						</view>
					</block>
					<block v-else>
						<view class="text-center font-color-666 pos-abs no-item-time">
							<text class="dis-block">暂无排班信息</text>
						</view>
					</block>
				</view>
			</block>
		</view>
		<view class="section mar-t-40">
			<view class="font-size-18 font-fa-me font-bold">
				<text class="font-color-price">*</text>
				<text>特别提醒</text>
			</view>
			<view class="tixing mar-t-20">
				<text class="font-color-999 font-size-12">请确认时间，预约未到3次以上，1年内不再接受预约！</text>
			</view>
			<view class="tixing mar-t-5">
				<text class="font-color-999 font-size-12">如需取消预约请提前三天</text>
			</view>
		</view>
		<view class="footer-btn" @click="subConsult">
			<text class="font-size-16">提交预约</text>
		</view>
	</view>
</template>

<script>
import { getConsultorDetail, workList, orderCreate } from '@/utils/http'
export default {
	data() {
		return {
			id: '',
			info: '',
			work_list: '',
			current_day_index: 0,

			time_index: 0,
			way: '',
			way_index: 0,
			tag_text: '',
			tag_index: 0,
			linkman: '',
			mobile:''
		}
	},
	methods: {
		detail() {
			getConsultorDetail({ id: this.id }).then(res => {
				if (res) {
					this.info = res
					this.way = res.way
					this.tag_text = res.tag_text
				}
			})
		},
		workList() {
			workList({ id: this.id }).then(res => {
				console.log(res)
				if(res){
					res.forEach(element => {
						if(element.list.work_hours_arr !='' ){
							this.current_day_index = element.index
						}
					});
				}
				this.work_list = res
			})
		},
		//咨询方式
		changeWayIndex(i) {
			this.way_index = i
		},
		changeDay(index) {
			this.current_day_index = index
		},
		//修改时间
		changeTime(i) {
			this.time_index = i
		},
		changeTag(i) {
			this.tag_index = i
		},

		//提交咨询
		subConsult() {
			//咨询人
			const linkman = this.linkman
			//咨询方式
			const way = this.way[this.way_index]
			//咨询类型
			const tag = this.tag_text[this.tag_index]

			if (!this.work_list) return this.errorToShow('排班未设置')
			if (!this.work_list[this.current_day_index])
				return this.errorToShow('排班未设置')
			const current_day = this.work_list[this.current_day_index]
			if (current_day.list.work_hours_arr == '')
				return this.errorToShow('排班未设置')

			const current_hours =
				current_day.list.work_hours_arr[this.time_index]

			//console.log(current_hours)

			orderCreate({
				counselor_id: this.id,
				// linkman: this.linkman,
				// mobile:this.mobile,
				way,
				tag,
				meeting_time: current_day.date_text,
				week_num: current_day.week_num,
				meeting_hours: current_hours
			}).then(res => {
				if (res) {
					this.successToShow('预约成功')
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/success?order_no=' + res.order_no
						})
					}, 1000)
				}
				console.log(res)
			})
			// console.log(current_day)
			// const date_text = current_day.date_text //具体时间
			// const week_num = current_day.week_num
			// if()
			// params = {
			// 	id:this.id,
			// 	way:this.
			// };
		}
	},
	onLoad(option) {
		this.id = option.id
		this.detail()
		this.workList()
	}
}
</script>

<style scoped>
.section {
	padding-left: 8px;
	padding-right: 8px;
}
.consult-user input {
	padding: 5px;
	height: 30px;
	line-height: 30px;
	border: 1rpx solid #858585;
}

.do-consult text {
	display: inline-block;
	padding: 0.33em 2.22em;
	border-radius: 7px;
	font-size: 0.72em;
	background-color: #f7f8fc;
	color: #999999;
	margin-top: 15px;
}
.do-consult .active {
	background-color: #0088ff !important;
	color: #ffffff !important;
}
.consultor-name {
	padding-right: 60px;
}

.consult-type .active {
	background-color: #0088ff !important;
	color: #ffffff !important;
}
.consult-type text {
	display: inline-block;
	padding: 5px 10px;
	background-color: #f7f8fc;
	color: #989898;
	font-size: 0.83em;
	margin-right: 16px;
	border-radius: 5px;
}
.choose-consult-date {
	/* #ifdef APP-PLUS */
	width: 750rpx;
	/* #endif */
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}
/* #ifndef APP-NVUE */
.choose-consult-date ::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */
.tab-bar-line {
	height: 1px;
	background-color: #cccccc;
}

.uni-tab-item {
	margin-top: 10px;
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	/* padding-left: 10px;
	padding-right: 10px; */
	padding: 6px 3px;
}

.uni-tab-item-title {
	color: #555;
	font-size: 0.83em;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}

.choose-consult-date .week-name {
	color: #333333;
}
.choose-consult-date .date-number {

	color: #b3b3b3;
}
.choose-consult-date .date-number,
.choose-consult-date .week-name {
	box-sizing: border-box;
	width: 100%;
	font-size: 2em;
	font-family: SourceHanSansCN-Medium, sans-serif;
	font-weight: 500;
}
.choose-consult-date .date-number {
	margin-top: 10px;
	height: 40px;
	line-height: 40px;
	width: 40px;
	border-radius: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.choose-consult-date .active .week-name {
	color: #0088ff !important;
}
.choose-consult-date .active .date-number {
	border-radius: 100%;
	background-color: #0088ff !important;
	color: #ffffff !important;
}
.choose-consult-time .no-item-time {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.choose-consult-time {
	min-height: 6.3em;
	/* column-count: 5;
	box-sizing: border-box; */
}
.choose-consult-time .item-time {
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid #dadada;
	margin-left: 6px;
	margin-bottom: 10px;
	color: #ababab;
	text-align: center;
	font-weight: 500;
	font-size: 0.83em;
	padding: 4px 9px;
	border-radius: 5px;
}
.choose-consult-time .acitve {
	color: #ffffff !important;
	background-color: #0088ff !important;
}

.footer-btn {
	height: 2.5em;
	width: 90%;
	line-height:  2.5em;
	margin: 0 auto;
}
.footer-btn text {
	display: block;
	margin-top: 30px;
	margin-bottom: 40px;
	background-color: #0088ff;
	border-radius: 5px;
	color: #ffffff;
	text-align: center;
	font-size: 0.83em;
	/* font-weight: bold; */
}
</style>